
<template>
    <div>
      <el-row :gutter="30">
        <el-col :span="3"
          ><div class="grid-content bg-purple">&emsp;</div></el-col
        >
        <el-col :span="18">
          <el-form :model="userinfo" label-width="80px">
            <el-tabs type="border-card">
              <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i>基础信息</span>
                <el-form-item label="真实姓名">
                  <el-input v-model="userinfo.userinfoRealname"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input v-model="userinfo.userinfoTel"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input v-model="userinfo.userinfoCardNo"></el-input>
                </el-form-item>
                <el-form-item label="婚姻状况">
                  <el-input v-model="userinfo.userinfoMaritaStatus"></el-input>
                </el-form-item>
                <el-form-item label="现住地址">
                  <el-input v-model="userinfo.userinfoDetailedAddress"></el-input>
                </el-form-item>
                <el-form-item label="详细住址">
                  <el-input
                    v-model="userinfo.userinfoCurrentResidence"
                  ></el-input>
                </el-form-item>
                <el-form-item label="最高学历">
                  <el-input v-model="userinfo.userinfoDegree"></el-input>
                </el-form-item>
                <el-form-item label="月收入">
                  <el-input v-model="userinfo.userinfoIncome"></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="户籍及联系人信息">
                <el-form-item label="籍贯信息">
                  <el-input v-model="userinfo.userinfoNativePlace"></el-input>
                </el-form-item>
                <el-form-item label="亲属姓名">
                  <el-input
                    v-model="userinfo.userinfoImmediateRelative"
                  ></el-input>
                </el-form-item>
                <el-form-item label="亲属关系">
                  <el-input v-model="userinfo.userinfoRelationship"></el-input>
                </el-form-item>
                <el-form-item label="亲属联系方式">
                  <el-input
                    v-model="userinfo.userinfoRelationshipPhone"
                  ></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="工作信息">
                <el-form-item label="公司姓名">
                  <el-input v-model="userinfo.companyName"></el-input>
                </el-form-item>
                <el-form-item label="公司地址">
                  <el-input v-model="userinfo.companyAddress"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="userinfo.companyDetailedAddress"></el-input>
                </el-form-item>
                <el-form-item label="公司性质">
                  <el-input v-model="userinfo.companyNature"></el-input>
                </el-form-item>
  
                <el-form-item label="公司行业">
                  <el-input v-model="userinfo.companyIndustry"></el-input>
                </el-form-item>
  
                <el-form-item label="联系方式">
                  <el-input v-model="userinfo.companyTel"></el-input>
                </el-form-item>
  
                <el-form-item label="入职时长">
                  <el-input v-model="userinfo.userinfoEntryTime"></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="身份证照片">
                <el-form-item label="身份证正面照">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击添加或修改图片"
                    placement="right"
                  >
                    <div class="block" @click="uploadSFZ('身份证正面照')">
                      <el-image
                        :src="userinfo.userinfoFrontPhoto"
                        style="width: 600px; height: 280px"
                      >
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </el-image>
                    </div>
                  </el-tooltip>
                </el-form-item>
  
                <el-form-item label="身份证反面照">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击添加或修改图片"
                    placement="right"
                  >
                    <div class="block" @click="uploadSFZ('身份证反面照')">
                      <el-image
                        :src="userinfo.userinfoReversePhoto"
                        style="width: 600px; height: 280px"
                      >
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </el-image>
                    </div>
                  </el-tooltip>
                </el-form-item>
  
  
                <el-form-item label="手持身份证正面照">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击添加或修改图片"
                    placement="right"
                  >
                    <div class="block" @click="uploadSFZ('手持身份证正面照')">
                      <el-image
                        :src="userinfo.holdFrontPhoto"
                        style="width: 600px; height: 280px"
                      >
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </el-image>
                    </div>
                  </el-tooltip>
                </el-form-item>
  
                
              </el-tab-pane>

              <el-tab-pane label="申请额度">
                    <el-form-item label="产品最大借款金额">
                        <el-input v-model="productLoanAmount" :disabled="true" ></el-input>
                    </el-form-item>

                    <el-form-item label="计划还款期数">
                        <el-input v-model="loanTime" :disabled="true"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="申请金额">
                        <el-input v-model="userinfo.backup2"></el-input>
                    </el-form-item>
              </el-tab-pane>
            </el-tabs>
  
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button type="primary" @click="quxao">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
  
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
  
      <el-dialog :title="titleWord" :visible.sync="dialogFlag" width="30%" center>
        <el-row>
          <el-col :span="7"
            ><div class="grid-content bg-purple-dark">&emsp;</div></el-col
          >
          <el-col :span="10"
            ><el-upload
              class="avatar-uploader"
              action="http://localhost:8080/uploadoss"
              name="file"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
            >
              <img v-if="imageUrl" :src="src" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload
          ></el-col>
          <el-col :span="7"
            ><div class="grid-content bg-purple-dark"></div
          ></el-col>
        </el-row>
  
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFlag = false">取 消</el-button>
          <el-button type="primary" @click="dialogFlag = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user: {
        },
        userinfo: {
            userId:3,
            getBackup1:0,
            backup1:0,
            backup3:0,
        },
        dialogFlag: false,
        titleWord: "",
        src: "",
        imageUrl:"",
        agg:0,
        loanTime:0,
        productLoanAmount:0,
      };
    },
    methods: {
        
      onSubmit() {
        console.log(123123123);
        this.userinfo.backup1 = this.agg;
        this.userinfo.userId = this.user.userId;
        this.userinfo.backup3=this.loanTime;
        console.log(this.userinfo.backup3);
        if(this.userinfo.backup2>0){
            this.$axios.post("/userinfo/addUserinfo",this.userinfo).then(res=>{
                if(res.data.code == 200) {
                    this.$message.success("提交成功");
                    this.$router.push("/Debit");
                }else{
                    this.$message.error("提交失败");
                    this.$router.push("/Debit");
                }
            });
        }else{
            alert("请选择借款额度!");
        }
       


      },
      update() {
        this.$axios.post("/userinfo/updateUserinfo",this.userinfo).then(res=>{
          if(res.data.code == 200) {
            this.$message.success("提交成功");
            this.$router.push("/DebitInfo");
          }
        });
      },


      handleSuccess(res, file) {
        this.dialogFlag = false;
        if (res.code == 200) {
          // this.imageUrl = res.message;
          switch (this.titleWord) {
            case "上传身份证正面照":
              this.userinfo.userinfoFrontPhoto = res.message;
              break;
            case "上传身份证反面照":
              this.userinfo.userinfoReversePhoto = res.message;
              break;
            case "上传手持身份证正面照":
              this.userinfo.holdFrontPhoto = res.message;
              break;
          }
         
        }
      },
      beforeUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
  
      uploadSFZ(title) {
        this.dialogFlag = true;
        this.titleWord = "上传" + title;
        this.imageUrl = false;
        switch (this.titleWord) {
            case "上传身份证正面照":
              if (this.userinfo.userinfoFrontPhoto != null) {
                // alert("111");
                this.imageUrl = true;
                
              }
              this.src = this.userinfo.userinfoFrontPhoto;
              break;
            case "上传身份证反面照":
              if (this.userinfo.userinfoReversePhoto != null) {
                // alert("222");
                this.imageUrl = true;
                
              }
              this.src = this.userinfo.userinfoReversePhoto;
              break;
            case "上传手持身份证正面照":
              if (this.userinfo.holdFrontPhoto != null) {
                this.imageUrl = true;
                
              }
              this.src = this.userinfo.holdFrontPhoto;
              break;
          }
      },
      loadUserinfo() {
        
        this.$axios
          .post("userinfo/selectByUser", {
            tel: this.user.userTel,
          })
          .then((res) => {
            this.userinfo = res.data.data.userinfo;
          });
          
      },
      quxao(){
        this.$router.push("/Debit");
    },
    },
  
    mounted() {
        this.user = JSON.parse(sessionStorage.getItem("user"));
        this.loadUserinfo(this.ids);
        //期数
        this.loanTime  = localStorage.getItem("loanTime");
        this.productLoanAmount = localStorage.getItem("productLoanAmount");

        //产品id
        this.agg = localStorage.getItem("productId");

        
       
    },
    
  };
  </script>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
 